<template>
  <div class="sidebar">
    <div class="sidebar-logo">
      <img src="@/assets/sidebar-logo.svg" alt="Logo" />
      <h1>Homebox</h1>
    </div>
    <ul class="sidebar-menu">
      <li class="create-menu" @click="toggleCreateMenu">
        <i class="fa fa-plus"></i> 创建
      </li>
      <ul v-if="isCreateMenuVisible" class="sub-menu">
        <li @click="openItemModal">物品</li>
        <li>类别</li>
        <li @click="openLocationModal">位置</li>
        <li>标签</li>
      </ul>
      <li @click="showOverview">
        <i class="fa fa-home"></i> 总览
      </li>
      <li @click="showLocations">
        <i class="fa fa-map-marker"></i> 地点
      </li>
      <li>
        <i class="fa fa-cog"></i> 配置
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  props: {
    isCreateMenuVisible: Boolean,
    isItemModalVisible: Boolean,
    isLocationModalVisible: Boolean
  },
  methods: {
    toggleCreateMenu() {
      this.$emit('toggleCreateMenu');
    },
    openItemModal() {
      this.$emit('openItemModal');
    },
    openLocationModal() {
      this.$emit('openLocationModal');
    },
    showLocations() {
      this.$emit('showLocations');
    },
    showOverview() {
      this.$emit('showOverview');
    }
  }
};
</script>

<style scoped>
/* 侧边栏样式 */
.sidebar {
  width: 250px;
  background-color: #333;
  color: white;
  padding: 20px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.sidebar-logo img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.sidebar-menu {
  list-style-type: none;
}

.sidebar-menu li {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px; /* 增大所有菜单项字体大小 */
}

.sidebar-menu li i {
  margin-right: 10px;
}

.sidebar-menu li:hover {
  background-color: #555;
}

/* 特殊样式：创建菜单项 */
.create-menu {
  font-size: 24px; /* 增大“创建”字体大小 */
  letter-spacing: 2px; /* 增加字间距 */
  background-color: #007BFF; /* 增加底色 */
}

/* 子菜单样式 */
.sub-menu {
  list-style-type: none;
  padding-left: 20px;
  /* 添加底色和阴影效果 */
  background-color: #3177bd; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  border-radius: 4px; 
  margin-top: 5px;
}

.sub-menu li {
  font-size: 16px;
  padding: 5px 10px;
}
</style>